<template>
    <div class="main-border">
        <el-button type="primary" @click="showAddCategoryDialog">新增分类</el-button>
        <el-table
            :data="category"
            stripe
            style="width: 100%;color: #5a5c61;">
            <el-table-column
                prop="id"
                label="类别号"
                show-overflow-tooltip
                width="200">
            </el-table-column>
            <el-table-column
                prop="categoryName"
                label="列别名称"
                show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
                prop="categoryStatus"
                label="状态"
                show-overflow-tooltip
                min-width="100"
                width="100">
                <template v-slot="scope">
                    <div>
                        <el-tag v-if="scope.row.categoryStatus == 0" type="danger"
                        >禁用</el-tag
                        >
                        <el-tag v-else-if="scope.row.categoryStatus == 1" type="success"
                        >正常</el-tag
                        >
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                prop="createTime"
                label="创建时间"
                show-overflow-tooltip
                min-width="150"
                width="200">
            </el-table-column>
            <el-table-column label="操作">
                <template v-slot="scope">
                    <el-button
                        size="mini"
                        type="danger"
                        v-if="scope.row.categoryStatus == '1'"
                        @click="disabled(scope.row.id)">禁用</el-button>
                    <el-button
                        size="mini"
                        type="primary"
                        v-if="scope.row.categoryStatus == '0'"
                        @click="restore(scope.row.id)">恢复</el-button>
                    <el-button
                        size="mini"
                        @click="deleteCat(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page.sync="nowPage"
                :page-size="8"
                background
                layout="prev, pager, next,jumper"
                :total="total">
            </el-pagination>
        </div>
        <!-- 弹幕 -->
        <el-dialog
            title="添加分类"
            :visible.sync="addCategoryDialogVisible"
            width="30%"
            center>
            <el-form ref="addCategoryForm" :model="newCategory" label-width="80px">
<!--                <el-form-item label="分类id" prop="categoryId">-->
<!--                    <el-input v-model="newCategory.categoryId"></el-input>-->
<!--                </el-form-item>-->
                <el-form-item label="分类名称" prop="categoryName">
                    <el-input v-model="newCategory.categoryName"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="categoryStatus">
                    <el-select v-model="newCategory.categoryStatus" placeholder="请选择">
                        <el-option label="启用" value="1"></el-option>
                        <el-option label="禁用" value="0"></el-option>
                    </el-select>
                </el-form-item>
<!--                <el-form-item label="创建时间" prop="categoryTime">-->
<!--                    <el-input v-model="newCategory.categoryTime"></el-input>-->
<!--                </el-form-item>-->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addCategoryDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="addCategory">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return {
            mode:1,
            nowPage: 1,
            total: 0,
            category: [],
            showModal: false,
            addCategoryDialogVisible: false,
            newCategory: {
                categoryId: '',
                categoryName: '',
                categoryStatus: '1',
                categoryTime: '',
            }
        }
    },
    name: "categoryList",
    created() {
        this.getCategory();
    },
    methods:{
        getCategory(){
            this.$api.getCategoryList({
                page: this.nowPage,
                nums: 8,
            }).then(res => {
                if(res.status_code==1){
                    this.category = res.data.list;
                    this.total = res.data.count;
                }else {
                    this.$message.error(res.msg)
                }

            }).catch(e => {
                console.log(e)
            })
        },
        addCategory() {
            this.$api.addCategoryForm({
                categoryName: this.newCategory.categoryName,
                categoryStatus: this.newCategory.categoryStatus,
            }).then(res => {
                if(res.status_code==1){
                    this.addCategoryDialogVisible = false;
                    this.getCategory();
                }else {
                    this.$message.error(res.msg)
                }
            }).catch(e => {
                console.log(e)
            })
        },
        showAddCategoryDialog() {
            this.addCategoryDialogVisible = true;
        },
        //禁用
        disabled(id){
            this.$api.changeStatus({
                id: id,
                status:0,
            }).then(res => {
                if(res.status_code==1){
                    this.getCategory();
                }else {
                    this.$message.error(res.msg)
                }
            }).catch(e => {
                console.log(e)
            })
        },
        //解除禁用
        restore(id){
            this.$api.changeStatus({
                id: id,
                status:1,
            }).then(res => {
                if(res.status_code==1){
                    this.getCategory();
                }else {
                    this.$message.error(res.msg)
                }
            }).catch(e => {
                console.log(e)
            })
        },
        //删除
        deleteCat(id){
            this.$api.deleteCategory({
                id: id,
            }).then(res => {
                if(res.status_code==1){
                    this.getCategory();
                }else {
                    this.$message.error(res.msg)
                }
            }).catch(e => {
                console.log(e)
            })
        },
        handleCurrentChange(val) {
            this.nowPage = val;
            this.getCategory();
        },
    },

}
</script>

<style scoped>
.main-border{
    background-color: #FFF;
    padding: 10px 30px;
    box-shadow: 0 1px 15px -6px rgba(0,0,0,.5);
    border-radius: 5px;
}
.block {
    display: flex;
    justify-content:center;
    padding-top: 15px;
    padding-bottom: 10px;
    width: 100%;
}
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
}
</style>